<template>
	<HeaderNav active-index="3"></HeaderNav>
	<TaskContainer>
	  <div class="toolbar">
		<el-button type="primary" @click="handleAdd">
		  <template #icon>
			<el-icon><CirclePlus /></el-icon>
		  </template>
		  添加人员组
		</el-button>
	  </div>
	  <div class="group-cards">
		<el-card v-for="group in list" :key="group.id" class="group-card" shadow="hover">
		  <div class="group-header">
			<h3 class="group-name">{{ group.name }}</h3>
			<span class="group-num">{{ group.num }}人</span>
		  </div>
		  <div class="group-time">
			<el-icon><Timer /></el-icon>
			<span>{{ group.create_time }}</span>
		  </div>
		  <div class="divider"></div>
		  <div class="group-actions">
			<el-button type="info" size="small" @click="handleApply(group)">
			  <template #icon>
				<el-icon><User /></el-icon>
			  </template>
			  添加人员
			</el-button>
			<el-button type="warning" size="small" @click="handleTask(group)">
			  <template #icon>
				<el-icon><Document /></el-icon>
			  </template>
			  分配任务
			</el-button>
			<el-button size="small" @click="handleEdit(group)">
			  <template #icon>
				<el-icon><Edit /></el-icon>
			  </template>
			  编辑
			</el-button>
			<el-button type="danger" size="small" @click="handleDelete(group)">
			  <template #icon>
				<el-icon><Delete /></el-icon>
			  </template>
			  删除
			</el-button>
		  </div>
		</el-card>
	  </div>
	</TaskContainer>

	<Footor></Footor>

	<!-- 添加人员组 -->
	<el-dialog v-model="showDialog" :title="title" width="450">
		<GroupAddView v-model:group-name="groupName" />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="showDialog = false">保存</el-button>
			<el-button @click="showDialog = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>

	<el-dialog v-model="showDialog2" title="分配人员" width="620" top="10vh">
		<GroupApplyView />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="showDialog2 = false">保存</el-button>
			<el-button @click="showDialog2 = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>

	<el-dialog v-model="showDialog3" title="分配任务" width="70%" top="10px">
		<GroupTaskListView />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="showDialog3 = false">保存</el-button>
			<el-button @click="showDialog3 = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>



  </template>
  
  <script>
  import HeaderNav from "@/components/HeaderNav.vue"
  import TaskContainer from "@/components/TaskContainer.vue"
  import GroupAddView from "./GroupAddView.vue"
  import GroupApplyView from "./GroupApplyView.vue"
  import GroupTaskListView from "./GroupTaskListView.vue"
  import Footor from '@/components/Footor.vue'


  export default {
	components: {
	  HeaderNav,
	  TaskContainer, 
	  GroupAddView,
	  GroupApplyView, 
	  GroupTaskListView,
	  Footor,
	},
	data() {
	  return {
		showDialog: false,
		showDialog2: false,
		showDialog3: false, 
		title: "" , 
		groupName: null,  // 设置当前组名
		list: [
		  {
			id: 1,
			create_time: '2016-05-03 11:22:33',
			num: 10,
			name: '正常组' 
		  },
		  {
			id: 2,
			create_time: '2016-05-03 11:22:33',
			num: 20,
			name: '第一小组' 
		  },
		  {
			id: 3,
			create_time: '2016-05-03 11:22:33',
			num: 10,
			name: '第二小组' 
		  },
		  {
			id: 4,
			create_time: '2016-05-03 11:22:33',
			num: 20,
			name: '第三小组' 
		  },
		  {
			id: 5,
			create_time: '2016-05-03 11:22:33',
			num: 20,
			name: '第三小组' 
		  },
		]
	  }
	},
	methods: {
	  handleAdd() {
		this.showDialog = true ;
		this.title = "添加人员组" ;
		this.groupName = null ;
	  },
	  handleApply(group) {
		 this.showDialog2 = true ;
	  },
	  handleTask(group) {
		this.showDialog3 = true ;
	  },
	  handleEdit(group) {
		this.showDialog = true ;
		this.title = "编辑人员组";
		this.groupName = group.name ;
	  },
	  handleDelete(group) {
		 this.$layer.confirm("您确定要移除该人员组吗?", index => {
			this.$layer.close(index);
		 })
	  }
	}
  }
  </script>
  
  <style scoped>
  .toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 20px;
  }
  
  .group-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 0 50px;
  }
  
  .group-card {
	flex: 0 1 calc(25% - 20px);
	box-sizing: border-box;
	transition: transform 0.3s, box-shadow 0.3s;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	overflow: hidden;
  }
  
  .group-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  
  .group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .group-name {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff; /* 调整为白色以确保与背景对比 */
  }
  
  .group-num {
	background-color: #f0f0f0;
	padding: 5px 10px;
	border-radius: 12px;
	color: #333;
  }
  
  .group-time {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 0 20px;
	color: #888;
  }
  
  .group-time el-icon {
	margin-right: 5px;
  }
  
  .divider {
	height: 1px;
	background-color: #e0e0e0;
	margin: 10px 0;
  }
  
  .group-actions {
	display: flex;
	justify-content: flex-start;
	gap: 5px;
	margin-top: 10px;
	padding: 0 20px 10px;
  }
  </style>